<template>
  <a-modal v-bind:visible="isShowAdd" title="新增用户" @ok="handleOk" @cancel="onCancel">
    <a-form-model
      ref="formRef"
      :rules="ruleForm"
      :model="formData"
      :label-col="{ span: 5 }"
      :wrapper-col="{ span: 17 }"
    >
      <a-form-model-item label="上级手机号">
        <a-input v-model="formData.parent" placeholder="请输入上级手机号"></a-input>
      </a-form-model-item>
      <a-form-model-item label="用户手机号" prop="phone">
        <a-input v-model="formData.phone" placeholder="请输入用户手机号"></a-input>
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>
<script>
import { addUserAPI } from '@/api/userinfo.js'
export default {
  name: 'AddUser',
  props: {
    isShowAdd: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      formData: {
        brand_id: process.env.VUE_APP_BRAND_ID,
        parent: '',
        phone: ''
      },
      ruleForm: {
        phone: [
          { required: true, message: '请输入手机号' },
          {
            pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
            message: '请输入正确手机号',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    handleOk() {
      this.$refs.formRef.validate(async valid => {
        if (!valid) return
        try {
          await addUserAPI(this.formData)
          this.$emit('upload')
          this.$emit('update:isShowAdd', false)
          this.$refs.formRef.resetFields()
          this.$message.success('新增成功')
        } catch (error) {
          this.$message.error(error.data.msg)
        }
      })
    },
    onCancel() {
      this.$emit('update:isShowAdd', false)
      this.$refs.formRef.resetFields()
    }
  }
}
</script>

<style lang="less" scoped></style>
